<template>
  <view class="script-detail main-box feat-grid">


      <view class="script-item-box fx-row-b">
        <view class="script-item-box-img main-bg" :style="{'background-image': 'url('+ renderData.detail.cover+')'}"></view>
        <view class="script-item-box-content fx-col-b">
          <view class="script-item-box-content-title fx-row-b">
            <text class="title-name com-overflow">{{ renderData.detail.title }}</text>
          </view>

          <view class="script-item-box-content-tag com-overflow fx-row-s">
            <uv-tag v-if="renderData.detail?.type"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="renderData.detail?.type"  :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"/>
            <uv-tag v-for="(item,index) in renderData.detail?.age"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="item"  :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"/>
            <uv-tag v-if="renderData.detail?.ageRating"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="renderData.detail?.ageRating"  :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"/>
            <uv-tag v-for="(item,index) in renderData.detail?.tags"
                    v-show="index > 2 ? false:true"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="item" :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"  />
          </view>

          <view  @click="jump('/pagesSetting/mine/userInfo?userId='+ renderData.detail.user?.id)" class="script-item-box-content-author fx-row-s" >
            <uv-image
              :width = "width"
              :height = "height"
              shape="circle"
              :src="renderData.detail.user?.avatar"
            ></uv-image>
            <text class="ml15"> 作者：{{ renderData.detail.user?.nickname }}</text>
          </view>

          <view class="script-item-box-content-op fx-row-b">
            <view class="script-item-box-content-op-time">发布时间：{{ timeFormat(renderData.detail?.releaseDate) }}</view>
          </view>
        </view>

      </view>

      <!--评分-->
      <view class="script-detail-rate">
        <view class="script-detail-rate-title"><text>剧本评分</text></view>
        <view class="script-detail-rate-data fx-row-b"  v-if="renderData.rateObj?.statifi_level && renderData.rateObj?.statifi_level > 0">
          <view class="script-detail-rate-data-val fx-col-c" >
            <view>{{(renderData.rateObj?.summary).toFixed(1)}}</view>
            <uni-rate :color="color.colorK" :activeColor="color.colorA" allow-half :value="renderData.rateObj?.statifi_level" size="30rpx" />
          </view>
          <view class="script-detail-rate-data-star">
            <!--星值-->
            <view v-for="(itemRate,indexRate) in 5" class="script-detail-rate-data-star-list fx-row-s">
              <view class="script-detail-rate-data-star-list-icon">
                <uv-icon v-for="(itemCount) in (5 - indexRate)" class="ml5" size="22" name="star-fill" :color="color.colorK" />
              </view>
              <view class="script-detail-rate-data-star-list-progress">
                <uv-line-progress height="11" :inactive-color="color.colorK"
                                  :active-color="configCss.iconStyle.color"
                                  :percent="renderData.rateObj.rate_distrabution?.[`${indexRate + 1}`] ?? 0"
                                  :show-percent="false"
                >
                </uv-line-progress>
              </view>
            </view>

          </view>
        </view>
        <view  v-if="renderData.rateObj?.statifi_level && renderData.rateObj?.statifi_level > 0" class="script-detail-rate-tip fx-row-s">
          <view class="script-detail-rate-tip-like fx-row-s">
            <text>{{ renderData.detail?.bookmark_number }}人收藏</text>
            <text class="ml10">{{renderData.detail?.played_number}}场已开</text>
          </view>
        </view>

        <view v-if="!renderData.rateObj?.statifi_level || (renderData.rateObj?.statifi_level==0)" class="script-detail-rate-no fx-row-b">
          <view>暂无评分</view>
          <view class="script-detail-rate-no-text">
            <text>{{ renderData.detail?.bookmark_number }}人收藏 </text>
            <text class="ml10">{{renderData.detail?.played_number}}场已开</text>
          </view>
        </view>
      </view>

      <view class="script-detail-line mt40">
        <text class="script-detail-line-title">剧情简介</text>
        <text class="script-detail-line-text">{{ renderData.timeObj?.name }}</text>
      </view>

      <view v-if="renderData.detail.desc?.length>=60" class="mt20">
        <comReadIng :line="2" :content="renderData.detail?.desc"></comReadIng>
      </view>
      <view class="mt20" style="text-indent:58rpx" v-else>
        {{renderData.detail?.desc}}
      </view>

      <view class="script-detail-line mt40">
        <text class="script-detail-line-title">角色简介</text>
        <text class="script-detail-line-text">{{ renderData.detail?.content?.players?.length }}人</text>
      </view>


      <!--角色简介-->
      <view class="script-detail-box fx-row-s">
        <view v-for="(item,index) in renderData.detail.content?.players" class="script-detail-box-list fx-col-s">
          <view class="script-detail-box-list-img main-bg"
                :style="{'background-image': 'url('+ item.cover+')'}"
          ></view>
          <view v-html="item.intro" class="script-detail-box-list-description com-overflow-more"></view>
        </view>
      </view>


      <view class="script-detail-line mt40">
        <text class="script-detail-line-title">体验空间</text>
        <text class="script-detail-line-text"></text>
      </view>

      <view class="script-item-middle">
        <view v-for="(item,index) in renderData.exprRoom" class="script-item-box fx-row-b">
          <view class="script-item-box-img main-bg" :style="{'background-image': 'url('+ item.script?.cover +')'}"></view>
          <view class="script-item-box-content fx-col-b">
            <view class="script-item-box-content-title fx-row-b">
              <text class="title-name com-overflow">{{item.name}}</text>
            </view>

            <view class="script-item-box-content-author fx-row-s">
              <uv-icon size="25" name="phone-fill" :color="color.colorA" />
              <text class="ml5"> 电话：{{item.tel}}</text>
            </view>
            <view class="script-item-box-content-author fx-row-s">
              <uv-icon size="25" name="map-fill" :color="color.colorA" />
              <text class="ml5">{{ item.address }}</text>
            </view>
          </view>
        </view>
      </view>

      <view v-if="renderData.exprRoom?.length<=0" class="no-data">
        <noData text="暂无体验空间" :isIcon="false"></noData>
      </view>

      <comLoading :isDisplay="renderData.isDisplay"></comLoading>
  </view>

</template>
<script setup>
import {computed, ref,reactive} from "vue";
import comReadIng from '@/components/com-readmore/index2';
import comLoading from '@/components/com-loading/index'
import noData from '@/components/com-nodata';
import { ossImage,jump,timeFormat } from '@/utils/index'
import { header,color,play } from '@/enums/constants';
import { onLoad,onShareAppMessage,onShareTimeline } from "@dcloudio/uni-app";
import {filterScriptTime} from "@/hooks/filterScriptTime.js"
import playApi from "@/apis/play";
const {width , height} = {...header.little};

const configCss = {
  listStyle:{
    marginTop:'30rpx',
    borderRadius:'10rpx',
    padding:'10rpx 20rpx',
    background:'rgba(255,255,255,.2)'
  },
  titleStyle:{
    fontSize:'30rpx',
    color:'#8B8989',
    padding:'5rpx 0'
  },
  detailStyle:{
    fontSize:'30rpx',
    padding:'5rpx 0',
    color:'#fff'
  },
  iconStyle:{
    color:color.colorA,
    tagColor:'rgba(94, 94, 94, 0.2)'
  },
}

const renderData = reactive({
  //加载
  isDisplay:true,
  id:'',
  detail:{},
  expRoom:[],
  rateObj:{}
})

//获取剧本详情
const handleGetScriptDetail = ()=>{
  playApi.getScriptDetail({scriptId:renderData.id}).then(res=>{
    if(res.code == 'SUCCESS' && res.data){
      let content = '';
      try{
        content = JSON.parse(res.data.content) ?? undefined;
      }catch(res){}
      renderData.timeObj = filterScriptTime(res.data.timeMin,res.data.timeMax)[0];
      renderData.detail = res.data;
      renderData.detail.content = typeof content == 'object' ? content : [];
    }
  }).finally(()=>{
    renderData.isDisplay = false;
  })
}

//获取体验空间
const handleGetExprRoom = ()=>{
  playApi.getExprRoom({scriptId:renderData.id}).then(res=>{
    if(res.code == 'SUCCESS' && res.data){
      console.log(res.data)
      renderData.exprRoom = res.data
    }
  })
}
//获取剧本评分
const handleGetScriptRate = ()=>{
  let para = {scriptId:renderData.id}
  playApi.getScriptRate(para).then(res=>{
    if(res.code == 'SUCCESS' && res.data){
      renderData.rateObj = res.data;
    }
  })
}

onShareAppMessage((res)=>{
  if (res.from === 'menu') {// 来自页面内分享按钮
    console.log(res.target)
  }
  return {
    title: renderData.detail?.title,
    path: '/pages/play/scriptDetail2?id=' + renderData.id
  }
})
onShareTimeline(()=>{
  return {
    title:renderData.detail?.title ?? '',
    query:'id=' + renderData.id
  }
})
onLoad((options) => {
  renderData.id = options?.id || 0;
  handleGetScriptDetail();
  handleGetExprRoom();
  handleGetScriptRate();
});




</script>

<style lang="scss" scoped>
.script-detail {
  color:$main-text-e;
  background-color:$main-d;

  //标题头
  &-line{
    @include main-text2;
    &-text{
      margin-left:8rpx;
      @include main-text6;
    }

  }

  //角色简介
  &-box{
    overflow-x: auto;
    flex-wrap: nowrap;
    align-items: flex-start;
    &-list{
      border-radius: 10rpx;
      margin:0 10rpx;
      @include main-line2;
      &-img{
        border-radius: 10rpx;
        width: 150rpx;
        height: 190rpx;
      }
      &-description{
        width: 150rpx;
        @include main-text5;
        @include main-line1;
        text-align: center;
        -webkit-line-clamp:3;
      }
    }
  }


  //评分样式
  &-rate{
    padding:15rpx 25rpx;
    @include main-line3;
    border-radius: 20rpx;
    background-color: rgba(255,255,255,.2);
    &-title{}
    &-data{
      width: 98%;
      margin: 0 auto;
      padding:0rpx 10rpx 10rpx;
      &-val{@include main-text0;text-align: center;}
      &-star{
        flex-grow: 1;
        padding-left:30rpx;
        &-list{
          line-height: .8;
          flex-wrap: nowrap;
          &-icon{width: 38%;text-align: right;padding-right: 10rpx;margin-top: -3rpx;transform: translateY(3rpx);}
          &-progress{width:61%;}
        }
      }
    }
    &-tip{
      padding-top:12rpx;
      @include main-text5;
      color:$main-text-a;
      border-top: .5px solid $main-text-b;
      opacity: .9;
    }
    &-no{
      font-family: alimama;
      padding:30rpx 45rpx;
      @include main-text2;
      &-text{
        color:$main-k;
      }
    }
  }

  .no-data{
    font-family: alimama;
    @include main-line4;
    .no{}
    &:deep(.no-text) {
      @include main-text1;
      color: $main-text-e;
    }
  }

}
</style>
